import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";

export function AddUserDialog({ open, onOpenChange }) {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    role: "",
    department: "",
    permissions: {
      view: true,
      edit: false,
      delete: false,
      share: false,
    },
  });

  const handleSubmit = () => {
    // 这里添加提交逻辑
    console.log("提交新用户", formData);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='sm:max-w-[500px]'>
        <DialogHeader>
          <DialogTitle>添加新用户</DialogTitle>
          <DialogDescription>创建新用户并设置其权限和角色。</DialogDescription>
        </DialogHeader>

        <div className='grid gap-4 py-4'>
          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='name' className='text-right'>
              姓名
            </Label>
            <Input
              id='name'
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              className='col-span-3'
            />
          </div>

          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='email' className='text-right'>
              邮箱
            </Label>
            <Input
              id='email'
              type='email'
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
              className='col-span-3'
            />
          </div>

          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='role' className='text-right'>
              角色
            </Label>
            <Select
              value={formData.role}
              onValueChange={(value) =>
                setFormData({ ...formData, role: value })
              }
            >
              <SelectTrigger className='col-span-3'>
                <SelectValue placeholder='选择角色' />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value='管理员'>管理员</SelectItem>
                <SelectItem value='编辑者'>编辑者</SelectItem>
                <SelectItem value='查看者'>查看者</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className='grid grid-cols-4 items-center gap-4'>
            <Label htmlFor='department' className='text-right'>
              部门
            </Label>
            <Select
              value={formData.department}
              onValueChange={(value) =>
                setFormData({ ...formData, department: value })
              }
            >
              <SelectTrigger className='col-span-3'>
                <SelectValue placeholder='选择部门' />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value='产品部'>产品部</SelectItem>
                <SelectItem value='市场部'>市场部</SelectItem>
                <SelectItem value='销售部'>销售部</SelectItem>
                <SelectItem value='技术部'>技术部</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className='grid grid-cols-4 items-start gap-4'>
            <Label className='text-right pt-2'>权限</Label>
            <div className='col-span-3 space-y-3'>
              <div className='flex items-center space-x-2'>
                <Checkbox
                  id='view'
                  checked={formData.permissions.view}
                  onCheckedChange={(checked) =>
                    setFormData({
                      ...formData,
                      permissions: { ...formData.permissions, view: !!checked },
                    })
                  }
                />
                <Label htmlFor='view'>查看</Label>
              </div>
              <div className='flex items-center space-x-2'>
                <Checkbox
                  id='edit'
                  checked={formData.permissions.edit}
                  onCheckedChange={(checked) =>
                    setFormData({
                      ...formData,
                      permissions: { ...formData.permissions, edit: !!checked },
                    })
                  }
                />
                <Label htmlFor='edit'>编辑</Label>
              </div>
              <div className='flex items-center space-x-2'>
                <Checkbox
                  id='delete'
                  checked={formData.permissions.delete}
                  onCheckedChange={(checked) =>
                    setFormData({
                      ...formData,
                      permissions: {
                        ...formData.permissions,
                        delete: !!checked,
                      },
                    })
                  }
                />
                <Label htmlFor='delete'>删除</Label>
              </div>
              <div className='flex items-center space-x-2'>
                <Checkbox
                  id='share'
                  checked={formData.permissions.share}
                  onCheckedChange={(checked) =>
                    setFormData({
                      ...formData,
                      permissions: {
                        ...formData.permissions,
                        share: !!checked,
                      },
                    })
                  }
                />
                <Label htmlFor='share'>分享</Label>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSubmit}>添加用户</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
